<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>NiiVue for FreeSurfer</title>
    <link rel="stylesheet" href="light.css" />
  </head>
  <body>
    <noscript>
      <strong>niivue requires JavaScript.</strong>
    </noscript>
    <header>
      <label for="meshSlider0">Curve</label>
      <input
        type="range"
        min="0"
        max="255"
        value="222"
        class="slider"
        id="meshSlider0"
      />
      <label for="check10">HighDPI</label>
      <input type="checkbox" id="check10" name="check10" unchecked />
    </header>
    <main>
      <canvas id="gl1"></canvas>
    </main>
    <footer>
      <x id="shaders">Shaders: </x>
      <label for="matCaps">&nbsp;&nbsp;MatCap</label>
      <select id="matCaps">
        <option value="Shiny">Shiny</option>
        <option value="Cortex">Cortex</option>
        <option value="Cream">Cream</option>
        <option value="Fuzzy">Fuzzy</option>
        <option value="Peach">Peach</option>
        <option value="Plastic">Plastic</option>
      </select>
    </footer>
    <script type="module" async>
      import * as niivue from "../dist/index.js";
      var slider0 = document.getElementById("meshSlider0");
      slider0.oninput = function () {
        nv1.setMeshLayerProperty(
          nv1.meshes[0].id,
          0,
          "opacity",
          this.value / 255.0
        );
      };
      document
        .getElementById("check10")
        .addEventListener("change", doCheck10Click);
      function doCheck10Click() {
        nv1.setHighResolutionCapable(this.checked);
      }
      document.getElementById("matCaps").addEventListener("change", doMatCap);
      function doMatCap() {
        nv1.setMeshShader(nv1.meshes[0].id, "Matcap");
        let matCapName = document.getElementById("matCaps").value;
        nv1.loadMatCapTexture("../matcaps/" + matCapName + ".jpg");
      }
      var nv1 = new niivue.Niivue({
        loadingText: "there are no images",
        backColor: [1, 1, 1, 1],
        show3Dcrosshair: true,
      });
      var meshLayersList1 = [
        {
          url: "../images/fs_LR.32k.LR.curvature.dscalar.nii",
          colormap: "gray",
          cal_min: -0.15,
          cal_max: -0.001,
          opacity: 222 / 255,
        },
      ];
      await nv1.attachTo("gl1");
      await nv1.loadMeshes([
        {
          url: "../images/fs_LR.32k.L.inflated.surf.gii",
          layers: meshLayersList1,
        },
      ]);
      nv1.setMeshShader(nv1.meshes[0].id, "Matcap");
      nv1.setMeshLayerProperty(
        nv1.meshes[0].id,
        0,
        "isTransparentBelowCalMin",
        false
      );
      document.getElementById("check10").checked =
        nv1.opts.forceDevicePixelRatio === 0;
      let cmaps = nv1.meshShaderNames();
      let cmapEl = document.getElementById("shaders");
      for (let i = 0; i < cmaps.length; i++) {
        let btn = document.createElement("button");
        btn.innerHTML = cmaps[i];
        btn.onclick = function () {
          nv1.setMeshShader(nv1.meshes[0].id, cmaps[i]);
        };
        cmapEl.appendChild(btn);
      }
    </script>
  </body>
</html>
